<template>
    <div class="list">
      <el-table
        :data="tableData"
        stripe
        style="width: 100%"
        @row-dblclick="play"
      >
        <el-table-column prop="name" label="音乐标题" width="180">
        </el-table-column>
        <el-table-column prop="artists[0].name" label="歌手" width="180">
        </el-table-column>
        <el-table-column prop="album.name" label="专辑"> </el-table-column>
        <el-table-column prop="duration" label="时长"> </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
 data() {
    return {
      tableData: [],
    };
  },
  methods: {
    play(item) {
      this.$store.state.mid = item.id;
      this.$root.eventhub.$emit("play");
    },
  },
  computed: {
    getTime() {
      return function (time) {
        let min = Math.floor(time / 60000).toString()[1]
          ? Math.floor(time / 60000).toString()
          : "0" + Math.floor(time / 60000).toString();
        let sec = Math.floor(time % 60000)
          .toString()
          .slice(0, 2);
        return min + ":" + sec;
      };
    },
  },
  mounted() {
    this.$request({
      url: "/search",
      params: {
        keywords: this.$route.query.keywords,
      },
    }).then((success) => {
      this.tableData = success.data.result.songs;
      this.tableData.forEach((i) => {
        i.duration = this.getTime(i.duration);
      });
    });
    this.$root.eventhub.$on("search", () => {
      this.$request({
        url: "/search",
        params: {
          keywords: this.$route.query.keywords,
        },
      }).then((success) => {
        this.tableData = success.data.result.songs;
        this.tableData.forEach((i) => {
          i.duration = this.getTime(i.duration);
        });
      });
    });
  },
}
</script>

<style>

</style>